<script setup lang="ts">
defineOptions({
  name: "UntestedBin"
});
import { ref, reactive, onMounted } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import axios from "axios";

const dialogVisible = ref(false);
const formRef = ref(null);
const editFormRef = ref(null);

const formData = ref({
  mub_cust: "",
  mub_device: "",
  mub_remark: "",
  mub_bin: ""
});

// const API_URL_ADD = "https://localhost:44389/api/normal/add";
// const API_URL_QUERY = "https://localhost:44389/api/normal/query";
// const API_URL_DEL = "https://localhost:44389/api/normal/delete";
// const API_URL_EDIT = "https://localhost:44389/api/normal/edit";

const API_URL_ADD = "http://10.20.5.21:8080/api/normal/add";
const API_URL_QUERY = "http://10.20.5.21:8080/api/normal/query";
const API_URL_DEL = "http://10.20.5.21:8080/api/normal/delete";
const API_URL_EDIT = "http://10.20.5.21:8080/api/normal/edit";

const openDialog = () => {
  dialogVisible.value = true;
};

const submitForm = () => {
  console.log(JSON.stringify(formData.value));
  formRef.value.validate(async valid => {
    if (valid) {
      try {
        const response = await fetch(API_URL_ADD, {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify(formData.value)
        });
        if (response.ok) {
          ElMessage.success("保存成功");
          dialogVisible.value = false;
          formRef.value.resetFields();
          await fetchData();
        } else {
          ElMessage.error("保存失败！");
        }
      } catch (error) {
        ElMessage.error("请求出错：" + error.message);
      }
    } else {
      ElMessage.error("表单填写不正确");
    }
  });
};

// 数据
const tableData = ref([]);
const searchParams = reactive({ cust: "", device: "" });
const total = ref(50);
const page = ref(1);
const pageSize = ref(10);

const editdialogVisible = ref(false);
const editData = reactive({
  mub_cust: "",
  mub_device: "",
  mub_remark: "",
  mub_bin: ""
});

// **获取数据**
const fetchData = async () => {
  try {
    const { data } = await axios.get(API_URL_QUERY, {
      params: {
        ...searchParams,
        page: page.value,
        pageSize: pageSize.value
      }
    });
    tableData.value = data.items;
    total.value = data.total;
  } catch (error) {
    console.error("数据加载失败:", error);
  }
};

// **删除数据**
const deleteRecord = async mub_id => {
  ElMessageBox.confirm("确认删除此记录?", "警告", { type: "warning" })
    .then(async () => {
      await axios.get(`${API_URL_DEL}/${mub_id}`);
      await fetchData();

      ElMessage.success("删除成功");
    })
    .catch(() => {});
};

const resetSearch = () => {
  searchParams.cust = "";
  searchParams.device = "";
  fetchData();
};

const handlePageChange = newPage => {
  fetchData();
};

// **编辑数据**
const editRecord = row => {
  Object.assign(editData, row);
  editdialogVisible.value = true;
};

const updateRecord = () => {
  editFormRef.value.validate(async valid => {
    if (valid) {
      try {
        await axios.post(`${API_URL_EDIT}`, editData);
        ElMessage.success("更新成功");
        editdialogVisible.value = false;
        fetchData();
      } catch (error) {
        ElMessage.error("更新失败");
      }
    } else {
      ElMessage.error("表单填写不正确");
    }
  });
};

onMounted(() => {
  fetchData();
});
</script>

<template>
  <div>
    <div class="dark:header-container">
      <el-form :inline="true" class="search-form">
        <el-form-item label="Cust">
          <el-input
            v-model="searchParams.cust"
            placeholder="输入 Cust"
            clearable
          />
        </el-form-item>
        <el-form-item label="Device">
          <el-input
            v-model="searchParams.device"
            placeholder="输入 Device"
            clearable
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="fetchData">查询</el-button>
          <el-button @click="resetSearch">重置</el-button>
          <el-button type="primary" @click="openDialog">新增</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 数据表格 -->
    <el-table
      :data="tableData"
      border
      style="width: 100%"
      :fit="true"
      class="custom-table"
    >
      <el-table-column prop="mub_id" label="MUB_ID" width="0" v-if="false" />
      <el-table-column prop="mub_cust" label="Cust" width="90" />
      <el-table-column prop="mub_device" label="Device" width="90" />
      <el-table-column prop="mub_bin" label="bin" width="80" />
      <el-table-column prop="mub_remark" label="备注" width="200" />
      <el-table-column label="操作" min-width="20" :width="null">
        <template #default="{ row }">
          <el-button size="small" @click="editRecord(row)">编辑</el-button>
          <el-button
            size="small"
            type="danger"
            @click="deleteRecord(row.mub_id)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->

    <div class="example-pagination-block">
      <el-pagination
        v-model:current-page="page"
        v-model:page-size="pageSize"
        :total="total"
        layout="prev, pager, next"
        background
        @current-change="handlePageChange"
      />
    </div>

    <el-dialog v-model="dialogVisible" title="新增记录" width="600px">
      <el-form ref="formRef" :model="formData" label-width="100px">
        <el-form-item label="Cust" prop="mub_cust">
          <el-input v-model="formData.mub_cust" maxlength="10" />
        </el-form-item>
        <el-form-item label="Device" prop="mub_device">
          <el-input v-model="formData.mub_device" maxlength="100" />
        </el-form-item>
        <el-form-item label="Bin" prop="mub_bin">
          <el-input v-model="formData.mub_bin" maxlength="100" />
        </el-form-item>
        <el-form-item label="备注" prop="mub_remark">
          <el-input v-model="formData.mub_remark" maxlength="255" />
        </el-form-item>
      </el-form>

      <template #footer>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitForm">保存</el-button>
      </template>
    </el-dialog>

    <el-dialog v-model="editdialogVisible" title="编辑记录">
      <el-form ref="editFormRef" :model="editData" label-width="100px">
        <el-form-item label="Cust" prop="mub_cust">
          <el-input v-model="editData.mub_cust" />
        </el-form-item>
        <el-form-item label="Device" prop="mub_device">
          <el-input v-model="editData.mub_device" />
        </el-form-item>
        <el-form-item label="bin" prop="mub_bin">
          <el-input v-model="editData.mub_bin" />
        </el-form-item>
        <el-form-item label="备注" prop="mub_remark">
          <el-input v-model="editData.mub_remark" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="editdialogVisible = false">取消</el-button>
        <el-button type="primary" @click="updateRecord">保存</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped lang="scss">
/* 对话框样式优化 */
.el-dialog {
  max-width: 600px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);

  /* 标题样式 */
  &__header {
    padding: 16px 24px;
    background: #f5f7fa;
    border-bottom: 1px solid #ebeef5;
    margin: 0;

    span {
      font-weight: 600;
      color: #303133;
    }
  }

  /* 内容区域 */
  &__body {
    padding: 20px 24px;
  }

  /* 底部按钮区域 */
  &__footer {
    padding: 16px 24px;
    border-top: 1px solid #ebeef5;
  }
}

/* 头部容器优化 */
.header-container {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 16px;
  background: #fff;
  margin-bottom: 20px;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* 搜索表单优化 */
.search-form {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 12px;

  .el-form-item {
    margin-bottom: 0;

    /* 输入框统一宽度 */
    .el-input {
      width: 180px;
      transition: all 0.3s;

      &:hover .el-input__wrapper {
        box-shadow: 0 0 0 1px #409eff inset;
      }
    }

    /* 标签样式 */
    .el-form-item__label {
      color: #606266;
      font-weight: 500;
    }
  }
}

/* 表格优化 */
.el-table {
  margin: 20px 0;
  border-radius: 8px;
  overflow: hidden;

  th.el-table__cell {
    background: #f8f9fa;
    color: #606266;
    font-weight: 600;
  }

  /* 操作按钮间距 */
  .el-button {
    margin-right: 8px;
    &:last-child {
      margin-right: 0;
    }
  }
}

/* 分页优化 */
.example-pagination-block {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;

  .el-pagination {
    padding: 8px 16px;
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }
}

/* 表单元素优化 */
.el-form {
  /* 表单项间距 */
  .el-form-item {
    margin-bottom: 18px;

    /* 输入框聚焦效果 */
    .el-input__wrapper {
      transition: all 0.3s;
      &:hover {
        box-shadow: 0 0 0 1px #c0c4cc inset;
      }
      &.is-focus {
        box-shadow: 0 0 0 1px #409eff inset;
      }
    }
  }

  /* 必填项标记 */
  .is-required .el-form-item__label::before {
    color: #f56c6c;
    margin-right: 4px;
  }
}
</style>
